<!--  -->
<template>
  <Modal
    v-model="addModal"
    :title="headTitle"
    width="800"
    class="addModal"
    @on-ok="addSubmit()"
    @on-cancel="closeModal()"
  >
    <div class="container">
      <div class="search-con">
        <Input
          @on-change="handleClear"
          clearable
          :placeholder="placeholder"
          v-model="userSearch"
          class="searchInput"
        />
        <Button @click="handleSearch" class="searchBtn" type="primary">
          <Icon custom="iconfont icon-sousuo" :size="16" />
          <span>搜索</span>
        </Button>
      </div>
      <Table
        @on-selection-change="addSelected"
        border
        ref="selection"
        :columns="columns"
        :data="data"
        :stripe="true"
        class="assign"
      ></Table>
      <Page
        :total="pageTotal"
        :current="pageno"
        :page-size="pageSize"
        @on-change="handlePage"
        prev-text="上一页"
        next-text="下一页"
      />
    </div>
  </Modal>
</template>

<script>
export default {
    props:{
        headTitle:{
            type:String,
            default:''
        },
        placeholder:{
            type:String,
            default:''
        },
        toModalData:{
            type:Array,
            default:()=>{return []}
        },
        isShowModal:{
            type:Boolean,
            default:''
        },
        roleDistinguish:{
            type:Number,
            default:0
        }
    },
  data() {
    return {
      addModal: false,
      userSearch: "",
      pageTotal: null,
      pageno: 1,
      pageSize: 10,
      currentIndex:null,
      userId:null,
      nurseName:'',
      columns: [
        {
          title: "选择",
          width: 75,
          align: "center",
          render:(h,params)=>{
              var self  = this;
              var defaultS = false; 
              if(self.currentIndex == params.row._index){
                  defaultS = true;
              }else {
                  defaultS = false; 
              }
              return (h('div'),[
                  h('Radio',{
                      props:{
                          value:defaultS
                      },
                      on:{
                          'on-change':()=>{
                              self.currentIndex =  params.row._index;
                              self.userId = params.row.userId;
                              self.nurseName = params.row.nickname;
                              console.log( params.row);
                              
                          }
                      }
                  })
              ])
          }
        },
        {
          title: "姓名",
          key: "nickname"
        },
        {
          title: "ID",
          key: "userId"
        },
        {
          title: "性别",
          key: "sex",
          render: (h, params) => {
            if (params.row.sex == 0) {
              return h("div", [h("span", "未知")]);
            } else if (params.row.sex == 1) {
              return h("div", [h("span", "男")]);
            } else if (params.row.sex == 2) {
              return h("div", [h("span", "女")]);
            }
          }
        },
        {
          title: "电话",
          key: "phone"
        }
      ],
      data: []
    };
  },

  components: {},

  methods: {
    addSubmit() {
        var data ={
            roleDistinguish:this.roleDistinguish,
            userId:this.userId,
            nurseName:this.nurseName
        }
        this.$emit('getRoleId',data);
      
    },
    closeModal() {
    },
    handleClear() {},
    handleSearch() {},
    addSelected() {},
    handlePage() {}
  },

  computed: {
      showModal(){
           this.addModal = this.isShowModal;
      },
      setData(){
          this.data = this.toModalData;
      }
  },
  watch:{
      showModal(a,b){
          console.log(a);
          console.log(b);
          
          this.addModal = this.isShowModal;
      },
      setData(a,b){

      }
  },
  mounted() {
      console.log(2586554);
      
     
  }
};
</script>
<style lang='less'>
.addModal {
    .ivu-modal-footer{
        .ivu-btn-text{
            border: 1px solid #dcdee2;
            &:hover{
                border-color: rgba(43, 214, 189, 0.85);
            }
        }
    }
    .ivu-modal-header{
        .ivu-modal-header-inner{
            font-size: 16px;
            font-weight: 500;
        }
    }
}
.container {
  padding: 0 10px;
  .search-con {
    padding-bottom: 15px;
    .searchBtn,
    .addBtn {
      margin-left: 10px;
      font-size: 14px;
      height: 32px;
      .icon-sousuo {
        padding-right: 5px;
        padding-bottom: 2px;
      }
      span {
        vertical-align: baseline;
      }
    }
    .searchInput {
      width: 200px;
    }
  }
}
.assign {
  margin-bottom: 15px;
  table {
    th,
    td {
      font-size: 14px;
      .ivu-btn:hover {
        background: none;
        color: #ed4014 !important;
        text-decoration: underline;
        border-color: transparent;
      }
    }
  }
}
</style>